<template>
  <div class="home">
    <h1>欢迎使用惊喜一餐！</h1>
    <p>为您推荐以下高评分餐厅：</p>
    <div class="restaurant-list">
      <div v-for="restaurant in recommendedRestaurants" :key="restaurant.id" class="restaurant-card">
        <img :src="restaurant.image" alt="" class="image"/>
        <div class="info">
          <h3>{{ restaurant.name }}</h3>
          <p>{{ restaurant.address }}</p>
          <p><strong>特色菜:</strong> {{ restaurant.specialDish }}</p>
          <el-rate v-model="restaurant.rating" disabled></el-rate>
        </div>
      </div>
    </div>
    <div class="change-button">
      <el-button type="primary" @click="shuffleAndSelectRestaurants">换一批</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      allRecommendedRestaurants: [
        { id: 1, name: '水饺店', address: '安师大花津校区二食堂一楼', image: '/images/1.png', rating: 4.5, specialDish: '小混沌' },
        { id: 2, name: '麻辣烫', address: '安徽省芜湖市弋江区', image: '/images/5.png', rating: 4.7, specialDish: '东北老式麻辣烫' },
        { id: 3, name: '兰州拉面', address: '安师大花津校区二食堂三楼', image: '/images/2.png', rating: 4.6, specialDish: '兰州拉面' },
        { id: 4, name: '特色炒菜', address: '安师大花津校区二食堂一楼', image: '/images/4.png', rating: 4.4, specialDish: '糖醋里脊' },
        { id: 5, name: '杂粮煎饼', address: '安师大花津校区小时代', image: '/images/3.png', rating: 4.6, specialDish: '杂粮煎饼' },
        { id: 6, name: '幸福小馆', address: '安徽省芜湖市', image: '/images/6.png', rating: 4.8, specialDish: '红烧肉' }
      ],
      recommendedRestaurants: []
    };
  },
  created() {
    this.shuffleAndSelectRestaurants();
  },
  methods: {
    shuffleAndSelectRestaurants() {
      const shuffled = this.allRecommendedRestaurants.slice();
      for (let i = shuffled.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
      }
      this.recommendedRestaurants = shuffled.slice(0, 6);
    },
    goToRestaurant(id) {
      this.$router.push(`/restaurant/${id}`);
    }
  }
};
</script>

<style scoped>
.home {
  text-align: center;
  padding: 20px;
}

.home h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #409eff;
}

.home p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #606266;
}

.restaurant-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
}

.restaurant-card {
  width: 250px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.restaurant-card:hover {
  transform: translateY(-5px);
}

.image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.info {
  padding: 10px;
}

.info h3 {
  font-size: 18px;
  margin: 0;
  color: #303133;
}

.info p {
  font-size: 14px;
  margin: 5px 0;
  color: #606266;
}

.el-rate {
  margin-top: 10px;
}

.change-button {
  margin-top: 20px;
}
</style>